<!DOCTYPE html>
<html>
<head>
  <title>Electromagnetic Field Diagram</title>
</head>
<body>
  <canvas id="physicsCanvas" width="500" height="550"></canvas>
  <script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2 - 25; // Shift center up slightly for caption
    const d_pixels = 100;
    const axisLength = 140;

    // Style settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 1.5;
    ctx.font = '20px "Times New Roman"';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    ctx.translate(centerX, centerY);

    // Helper function for drawing arrows
    function drawArrow(ctx, fromx, fromy, tox, toy) {
      const headlen = 10; // length of head in pixels
      const dx = tox - fromx;
      const dy = toy - fromy;
      const angle = Math.atan2(dy, dx);
      ctx.beginPath();
      ctx.moveTo(fromx, fromy);
      ctx.lineTo(tox, toy);
      ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
      ctx.moveTo(tox, toy);
      ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
      ctx.stroke();
    }

    // Helper function for the "out of page" symbol (⊙)
    function drawOutwardSymbol(x, y, radius) {
      // Circle
      ctx.beginPath();
      ctx.arc(x, y, radius, 0, 2 * Math.PI);
      ctx.stroke();
      // Dot
      ctx.beginPath();
      ctx.arc(x, y, radius * 0.3, 0, 2 * Math.PI);
      ctx.fill();
    }

    // 1. Draw Axes
    // y-axis
    drawArrow(ctx, 0, axisLength, 0, -axisLength);
    ctx.fillText('y', 15, -axisLength + 5);

    // x-axis
    drawArrow(ctx, -axisLength, 0, axisLength, 0);
    ctx.fillText('x', axisLength - 5, 20);

    // z-axis indicator
    ctx.lineWidth = 1;
    drawOutwardSymbol(0, 0, 7);
    ctx.lineWidth = 1.5;
    ctx.fillText('z', -18, 5);

    // 2. Draw the Slab Boundaries
    const slabHeight = 200;
    ctx.beginPath();
    ctx.moveTo(-d_pixels, -slabHeight);
    ctx.lineTo(-d_pixels, slabHeight);
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(d_pixels, -slabHeight);
    ctx.lineTo(d_pixels, slabHeight);
    ctx.stroke();

    // 3. Draw Current Density Indicator
    const j_pos = { x: 60, y: 80 }; // In 4th quadrant
    ctx.lineWidth = 1;
    drawOutwardSymbol(j_pos.x, j_pos.y, 8);
    ctx.lineWidth = 1.5;
    ctx.font = 'italic 22px "Times New Roman"';
    ctx.fillText('j', j_pos.x + 22, j_pos.y);
    ctx.font = '20px "Times New Roman"';

    // 4. Draw Dimension Line
    const dimY = 170;
    const tickHeight = 10;
    const arrowHeadLen = 10;

    // Horizontal line
    ctx.beginPath();
    ctx.moveTo(-d_pixels, dimY);
    ctx.lineTo(d_pixels, dimY);
    ctx.stroke();

    // Ticks at the ends
    ctx.beginPath();
    ctx.moveTo(-d_pixels, dimY - tickHeight / 2);
    ctx.lineTo(-d_pixels, dimY + tickHeight / 2);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(d_pixels, dimY - tickHeight / 2);
    ctx.lineTo(d_pixels, dimY + tickHeight / 2);
    ctx.stroke();

    // Outward-pointing arrows
    ctx.beginPath();
    // Left arrow
    ctx.moveTo(-d_pixels, dimY);
    ctx.lineTo(-d_pixels - arrowHeadLen, dimY - arrowHeadLen / 2);
    ctx.moveTo(-d_pixels, dimY);
    ctx.lineTo(-d_pixels - arrowHeadLen, dimY + arrowHeadLen / 2);
    // Right arrow
    ctx.moveTo(d_pixels, dimY);
    ctx.lineTo(d_pixels + arrowHeadLen, dimY - arrowHeadLen / 2);
    ctx.moveTo(d_pixels, dimY);
    ctx.lineTo(d_pixels + arrowHeadLen, dimY + arrowHeadLen / 2);
    ctx.stroke();

    // Label for dimension line
    ctx.font = 'italic 20px "Times New Roman"';
    ctx.fillText('2d', 0, dimY - 15);
    ctx.font = '20px "Times New Roman"';


    // 5. Add Caption
    ctx.font = '20px "SimSun"'; // Use a font that supports Chinese characters
    ctx.fillText('电图 2.6.1', 0, 240);

  </script>
</body>
</html>